<template>
  <div class="ChangePassword" @click.stop>
    <div class="block">
      <div class="title">修改登录密码</div>
      <van-form @submit="onSubmit">
        <van-cell-group inset>

          <van-field v-model="oldPassword" type="password" name="当前密码" label-align="top" label="当前密码"
            placeholder="请输入当前密码"
            :rules="[{ required: true, message: '请填写当前密码' }, { validator: oldPasswordValidator, message: '密码错误，请重试' }]">
            <template #button>
              <SvgIcon name="清空" style="color:#fff" :size="20" v-show="oldPassword.length > 0"
                @click="oldPassword = ''" />
            </template>
          </van-field>
          <van-field v-model="newPassword" type="password" name="设置新密码" label-align="top" label="设置新密码"
            placeholder="请设置新的登录密码" :rules="[{ required: true, message: '请填写新密码' }]">
            <template #button>
              <SvgIcon name="清空" style="color:#fff" :size="20" v-show="newPassword.length > 0"
                @click="newPassword = ''" />
            </template>
          </van-field>
          <van-field v-model="resNewPassword" type="password" name="再次输入新密码" label-align="top" label="再次输入新密码"
            placeholder="请再次输入新的登录密码"
            :rules="[{ required: true, message: '请填写新密码' }, { message: '两次输入的密码不一致', validator: resNewPasswordValidator }]">
            <template #button>
              <SvgIcon name="清空" style="color:#fff" :size="20" v-show="resNewPassword.length > 0"
                @click="resNewPassword = ''" />
            </template>
          </van-field>
        </van-cell-group>
        <div class="submit">
          <van-button block @click="emit('close')">
            取消
          </van-button>
          <van-button block native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </div>
    <van-dialog v-model:show="success" @confirm="goLogin">
      <div class="success">
        <SvgIcon style="color: #fff;" name="成功" :size="50" />
        <h3>密码修改成功</h3>
        <p>请重新登录</p>
      </div>
    </van-dialog>
  </div>
</template>

<script setup>
import SvgIcon from '@/components/SvgIcon.vue';
import { usePortStore } from '@/stores/index'
import { useRouter } from 'vue-router';
import { ref } from 'vue';
const { setPort } = usePortStore()
const router = useRouter()
const oldPassword = ref('')
const newPassword = ref('')
const resNewPassword = ref('')
const success = ref(false)
const emit = defineEmits(['close']);
const oldPasswordValidator = (val) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(val === '123456');
    }, 1000);
  });
}
const resNewPasswordValidator = (val) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(val === newPassword.value);
    }, 0);
  });
}

const onSubmit = (e) => {
  console.log(e, '提交')
  success.value = true
}
const goLogin = () => {
  setPort({})
  router.push('/login')
}
</script>

<style lang="scss" scoped>
.ChangePassword {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;

  .block {
    width: 335px;
    height: 448px;
    background-color: #fff;
    border-radius: 16px;
    background: #FFF;
    padding: 32px 10px;
    position: relative;

    .title {
      width: 100%;
      color: #191919;
      font-family: "PingFang SC";
      font-size: 14px;
      text-align: center;
      margin-bottom: 32px;
    }

    :deep(.van-field) {
      // padding: 0;
    }


    .van-form {

      .submit {
        position: absolute;
        display: flex;
        justify-content: center;
        bottom: 0;
        left: 0;
        width: 100%;

        :deep(.van-button) {
          border-radius: 0;

          .van-button__text {

            color: var(--van-primary-color);
          }
        }
      }
    }
  }

  .success {
    padding: 32px;

    .SvgIcon {
      margin-bottom: 20px;
    }

    h3 {
      width: 100%;
      color: #191919;
      text-align: center;
      font-size: 14px;
      margin-bottom: 10px;
    }

    p {
      width: 100%;
      color: #666;
      text-align: center;
      font-size: 12px;
    }
  }
}
</style>
